<template>
	<div>
		<div id="app-hp">
			<el-backtop target=".body-hp" :visibility-height="0" :right="9" :bottom="373"
				style="position: fixed;right:26rem;bottom: 373rem;z-index: 999;width: 78rem;height: 78rem;border-radius: 0;background-color:#549b6b;"></el-backtop>
		</div>
		<ul class="toTop-hp">
			<li></li>
			<li class="li-enter-leave" style="position: relative;" @mouseenter.stop="toTop_mouseEnter($event)"
				@mouseleave.stop="toTop_mouseLeave($event)">
				<el-popover placement="left" width="200" trigger="hover">
					<div class="erweima-hp">
						123
					</div>
					<el-button slot="reference" style="width: 100%;height: 100%;background: none;"></el-button>
				</el-popover>
			</li>
			<li @click="toTop_hp()">
				<a href="#app-hp" style="width: 100%;height: 100%;display: block;">

				</a>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: "body-hp",
	data() {
		return {

		};
	},
	methods: {
	},
	created() {

	},
}
</script>

<style scoped>
/* 回到顶部 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote，th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.toTop-hp {
	width: 78rem;
	position: fixed;
	right: 26rem;
	bottom: 373rem;
	z-index: 100;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	box-shadow: 0 -3rem 15rem rgba(0, 0, 0, .15);
}

.toTop-hp>li {
	width: 78rem;
	height: 78rem;
	background-color: white;
}

.toTop-hp>li:first-child {
	border-bottom: solid 1px #dedede;
}

.toTop-hp>li:last-child {
	background-color: #549b6b;
}

.toTop-hp>li.li-enter-leave>.erweima-hp {
	width: 100%;
	height: 100%;
}

.toTop-hp>li.li-enter-leave>.erweima-hp>.content-hp {
	width: 192rem;
	height: 100%;
	background-color: #26a740;
}

.toTop-hp>li.li-enter-leave.on>.erweima-hp {
	display: block;
	/* animation:move2 .3s ease-in-out forwards; */
	transform: translate(10rem, 0);
	opacity: 1;
}

.toTop-hp>li.li-enter-leave.on2>.erweima-hp {
	display: block;
}

::v-deep #app-hp [class^=el-icon-] {
	display: none;
}

/* 回到顶部 end*/
</style>